{% extends "admin/base_site.html" %}
{% load i18n admin_static %}

{% block extrastyle %}
	<link href="{{ STATIC_URL }}chosen/chosen.min.css" rel="stylesheet" type="text/css" media="screen">
	<style>
		.scroll {height: 300px; overflow: auto}
	</style>
{% endblock %}

{% block extrajs %}
	<script type="text/javascript" src="{{ STATIC_URL }}base/js/notification.js"></script>
	<script src="{{ STATIC_URL }}chosen/chosen.jquery.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#division").chosen();
			$("#team").chosen();
			$("#type").chosen();
			go_filter();
		});
		
		var go_filter = function(){
			$("#filter_btn").css('display', 'none');
			$("#loading_box").css('display', 'inline-block');
			var division = "";
			var team = "";
			var type = "";
			var $division = $("#division").val();
			var $team = $("#team").val();
			var $type = $("#type").val();
			if($division != null){
				$.each($division, function(k, v){
					division += (v + ',');
				})
			};
			if($team != null){
				$.each($team, function(k, v){
					team += (v + ',');
				})
			};
			if($type != null){
				$.each($type, function(k, v){
					type += (v + ',');
				})
			};
			$.ajax({
				url: "",
				data: {
					'division': division,
					'team': team,
					'type': type
				},
				success: function(data){
					if(data.status == 1){
						$("#kanban").html(data.html);
						$("#filter_btn").css("display", "inline-block");
						$("#loading_box").css("display", "none");
					}
				}
			});
		}
	</script>
{% endblock %}

{% block breadcrumbs %}
{% endblock %}

{% block content %}
	<div id="filter">
		<select data-placeholder="filter divisions" id="division" multiple>
			{% for d in divisions %}
				<option value="{{ d.pk }}">{{ d.name }}</option>
			{% endfor %}
		</select>
		<select data-placeholder="filter teams" id="team" multiple>
			{% for d in divisions %}
				<optgroup label="{{ d.name }}">
					{% for t in d.productionteam_set.all %}
						<option value="{{ t.pk }}">{{ t.name }}</option>
					{% endfor %}
				</optgroup>
			{% endfor %}
		</select>
		<select data-placeholder="filter production type" id="type" multiple>
			<option value="N">New</option>
			<option value="U">Update</option>
		</select>
		<input id="filter_btn" type="button" value="Filter" class="btn btn-info" onclick="go_filter()" />
		<i id="loading_box" class="btn btn-info" style="display: none">Loading...</i>
	</div><br />
	<div id="kanban">
		<div style="text-align: center">
			<img src="{{ STATIC_URL }}base/img/loading.gif" />
		</div>
	</div>
{% endblock %}
